<template>
  <div class="confirm-order">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="user-o" color="#1989fa" size="20" @click="gotoUser" />
      </template>
    </van-nav-bar>
    <!-- 弹窗提示选择地址 -->
    <alert>
      <div class="el-icon-warning-outline" slot="top"></div>
      <div class="text" slot="mid">请选择地址</div>
    </alert>
    <div v-if="showLogin === false" class="goto-login">
      请<i @click="gotoUser">登录</i>
    </div>
    <div v-else class="address" @click="gotoAddress()">
      <div class="item"  >
        <van-icon name="location-o" />
        <span class="info" v-if="abc">
          <div class="name">
            {{ addressData.name }} {{ addressData.tel }}
          </div>
          <div class="location">{{ addressData.address }}</div>
        </span>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 送达 -->
    <div class="arrive-time">
      <div class="left">送达时间</div>
      <div class="right">
        <div class="time">尽快送达 | 预计{{ Time }}</div>
        <div class="brand">蜂鸟专送</div>
      </div>
    </div>
    <div class="pay-way">
      <div class="way">支付方式</div>
      <div class="red-bag">红包(暂不支持)</div>
    </div>
    <!-- 商品部分 -->
    <div class="goods">
      <div class="shop">
        <img :src="imgBaseUrl + shopImg" alt="" />
        <div class="name">{{ shopName }}</div>
      </div>
      <div class="good" v-for="item in goods.foods" :key="item.food_id">
        <span class="food-name">{{ item.name }}{{ item.specs_name }}</span>
        <span class="price">￥{{ item.price }}</span>
      </div>
      <div class="good">
        <span class="food-name">餐盒</span>
        <span class="price">￥1</span>
      </div>
      <div class="good">
        <span class="food-name">配送费</span>
        <span class="price">￥{{ $store.state.shop_delivery_fee }}</span>
      </div>
      <div class="good">
        <span class="food-name">待支付</span>
        <span class="price">￥{{ TotalMoney }}</span>
      </div>
    </div>
    <div class="other">
      <span class="other-name">备注信息</span>
      <van-icon name="arrow" />
    </div>
    <div class="other">
      <span class="other-name">发票抬头</span>
      <van-icon name="arrow" />
    </div>
    <div class="bottom">
      <span class="money">待支付￥{{ TotalMoney }}</span>
      <span @click="pay" class="goto-pay">确定下单</span>
    </div>
  </div>
</template>

<script >
import Alert from "../../components/alert/Alert.vue";
import { getAddress, getShopInfo } from "../../api/reques";
export default {
  components: { Alert },
  data() {
    return {
      address: {}, //用户第一个地址
      imgBaseUrl: "//elm.cangdu.org/img/", // 商家logo基本地址
      deliveryTime: 20, //配送时间 接口处未找到 写死
      shopName: "", // 商家名称
      shopImg: "", // 商家地址
      addressData: {},
      abc:null,
    };
  },
  created() {
    this.getAddress();
    // 获取商家信息
    // console.log("----------------------------");
    // console.log(localStorage.getItem("addressDetail",));
    this.addressData = JSON.parse(localStorage.getItem("addressDetail"));
    if(this.addressData===null){
      this.abc = false
    }else{
      this.abc = true
    }
    console.log("------------------------------------", this.addressData);
    getShopInfo(this.$route.params.id)
      .then((res) => {
        // console.log(res);
        this.shopName = res.data.name;
        this.shopImg = res.data.image_path;
        // console.log(this.shopImg);
        // console.log(this.shopName);
      })
      .catch((err) => {
        // console.log(err);
      });
  },
  computed: {
    //有无登录，没有登录需要登录
    showLogin() {
      if (window.localStorage.getItem("user_id")) {
        return true;
      } else {
        return false;
      }
    },
    // 当前时间的20分钟后
    Time() {
      let time = new Date().getTime();
      let willTime = parseInt(time) + 20 * 1000 * 60;
      let date = new Date(willTime);
      let h = date.getHours();
      let m = date.getMinutes();
      return h + ":" + m;
    },
    // 与当前商铺id相同的订单
    goods() {
      let product = this.$store.state.cartItems.find(
        (item) => item.id === this.$route.params.id
      );
      return product;
    },
    // 当前列表中所有食品的价格+餐盒费写死+配送费
    TotalMoney() {
      let money = this.goods.foods.reduce((pre, item) => {
        return pre + item.price;
      }, 0);
      return money + 1 + this.$store.state.shop_delivery_fee;
    },
  },
  filters: {
    sex(value) {
      if (value === 1) {
        return "先生";
      } else {
        return "女士";
      }
    },
  },
  methods: {
    gotoAddress() {
      this.$router.push("/info");
    },
    onClickLeft() {
      // Toast('返回');
      this.$router.back();
    },
    //点击跳转我的
    gotoUser() {
      this.$router.push("/home/user");
    },
    // 获取用户地址
    getAddress() {
      getAddress(window.localStorage.getItem("user_id"))
        .then((res) => {
          this.address = res.data[0];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 将订单传入购物车列表
    pay() {
      if (this.showLogin === true) {
        let payload = {};
        payload.id = this.$route.params.id;
        payload.foods = this.goods.foods;
        payload.shopImg = this.imgBaseUrl + this.shopImg;
        payload.shopName = this.shopName;
        payload.address = this.address;
        payload.arriveTime = this.Time;
        payload.totalMoney = this.TotalMoney;
        payload.nowTime = this.nowTime;
        payload.surplusTime = 15 * 60 * 1000;
        // 异步操作 定时器记录过期时间
        this.$store.dispatch("addCartList", payload);
        this.$router.push(
          "/confirmOrder/" + this.$route.params.id + "/payment"
        );
        //没有登录点击则弹出
      } else {
        this.$store.commit("changeShowAlert", true);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.confirm-order {
  background-color: #f2f2f2;
  height: 100vh;
  width: 100vw;
}

.bottom {
  display: flex;
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: space-between;

  .money {
    display: inline-block;
    flex: 75%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .goto-pay {
    padding: 10px;
    display: inline-block;
    flex: 25%;
    background-color: rgb(6, 197, 6);
  }
}

.other {
  margin-top: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;

  .other-name {
    font-size: 14px;
  }
}

.van-nav-bar {
  background: rgb(2, 182, 253, 0.7);
}

.goto-login {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  background-color: #fff;

  i {
    color: rgb(2, 182, 253, 0.7);
  }
}

.goods {
  margin-top: 10px;
  background-color: #fff;

  .good {
    display: flex;
    padding: 10px;
    font-size: 12px;
    justify-content: space-between;

    .food-name {
      color: rgb(80, 80, 80);
    }

    .price {
      color: chocolate;
    }
  }

  .shop {
    display: flex;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #eee;

    img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .name {
      margin-left: 10px;
    }
  }
}

.pay-way {
  width: 100%;
  margin-top: 15px;
  background-color: #fff;

  .way {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .red-bag {
    padding: 10px;
    color: rgb(107, 107, 107);
    font-size: 12px;
  }
}

.address {
  margin-top: 10px;

  .item {
    padding: 10px;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    align-items: center;

    van-icon {
      width: 20px;
    }

    .info {
      flex: 1;

      .name {
        font-size: 14px;
      }

      .location {
        font-size: 12px;
        margin-top: 5px;
        color: rgb(94, 94, 94);
      }
    }
  }
}

.arrive-time {
  width: 100%;
  margin-top: 20px;
  display: flex;
  padding-left: -3px;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-left: 3px solid rgb(2, 182, 253, 0.7);

  .right,
  .left {
    flex: 1;
  }

  .left {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
  }

  .right {
    .time {
      margin-top: 10px;
      font-size: 14px;
      color: rgb(2, 182, 253, 0.7);
    }

    .brand {
      padding: 5px;
      display: inline-block;
      font-size: 12px;
      color: #fff;
      margin: 10px 0;
      border-radius: 10px;
      background-color: rgb(2, 182, 253, 0.7);
    }
  }
}
</style>
